<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
        WANT:
        1.WORK部分的轮播图
        2.css 动画效果 类似嘉琪的 你去看一下就明白
        3.网易云插件
        4.实现 skill 里面的拉动读取value值并显示！！
        5.登录注册实现-触动时-色块滑动！！
     -->
    <!-- 
        color-use:
        font: #135AF2
        bgcolor: #B0B0B0

     -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sam9029 Resume</title>
    <link rel="stylesheet" href="resumeIndexStyle.css">
    <link rel="stylesheet" href="./responseStyle.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
</head>
<body>
    <div id="app">
        <!-- 导航栏 -->
        <header>
            <div id="nav_bar">
                <div id="nav_bar_Name">
                    <a href="#">Sam9029 Resume</a>
                </div>
                <div id="nav_bar_Info">
                    <span> <a href="#AboutMe">AboutMe</a></span>
                    <span> <a href="#Skill">Skill</a></span>
                    <span> <a href="#Works">Works</a></span>
                    <span> <a href="#Contact">Contact</a></span>
                </div>
            </div> 

        </header>

        <!-- 主体 -->
        <main id="main">
            <!-- Aboutme -->
            <section id="am">
                <div id="main_am_info">
                    <span>Hi!</span><br />
                    <span>I am <span id="myName">Sam</span>, </span><br />
                    <span>a Web Developer</span><br />
                </div>

                <div id="main_am_img">
                    <img src="img\perfil.png" alt="photo">
                </div>

                <div id="main_am_instruction">
                    <h1 class="info_title" id="AboutMe">关于我</h1>
                    <h2>我是SAM</h2>
                    <table>
                        <tr>
                            <th>年龄</th>
                            <td>22岁</td>
                        </tr>
                        <tr>
                            <th>性别</th>
                            <td>男</td>
                        </tr>
                        <tr>
                            <th>专业</th>
                            <td>信息管理与信息系统</td>
                        </tr>
                        <tr>
                            <th>学历</th>
                            <td>本科</td>
                        </tr>
                        <tr>
                            <th>毕业院校</th>
                            <td>成都银杏酒店管理学院</td>
                        </tr>
                        <tr>
                            <th>毕业年份</th>
                            <td>2022年</td>
                        </tr>
                        <tr>
                            <th>自我介绍</th>
                            <td>热衷于前端行业，自学前端相关技术</td>
                        </tr>
                    </table>
                </div>
            </section>

            <!-- Skill -->
            <section id="sl">
                <h1 class="info_title" id="Skill">专业技能</h1>
                <div id="main_skill">
                    <!-- <div id="main_skill_img"></div> -->
                    <div id="main_skill_front">
                        <h2 class="front">前端</h2>
                        <dt class="skillName">HTML
                            <dd>熟悉常用标签元素</dd>
                            <dd>了解html语义化</dd>
                        </dt>
                        <dt class="skillName">CSS
                            <dd>熟悉常用样式属性</dd>
                            <dd>熟悉flex布局使用</dd>
                            <dd>了解响应式布局</dd>
                        </dt>
                        <dt class="skillName">JavaScript
                            <dd>熟悉基本JS语法知识</dd>
                            <dd>熟悉JS内置数据类型及对象</dd>
                            <dd>了解JS基本特性</dd>
                        </dt>
                        <dt class="skillName">ES6
                            <dd>了解ES6 语法常用新特性</dd>
                        </dt>
                        <dt class="skillName">Vue
                            <dd>熟悉Vue 2，能够使用vue-cli，vue-router，vuex，axios开发项目</dd>
                        </dt>
                    </div>
                    <div id="main_skill_back">
                        <h2 class="back">后端</h2>
                        <dt class="skillName">Node.js
                            <dd>了解node.js模块化开发思维</dd>
                        </dt>
                        <dt class="skillName">MongoDB
                            <dd>了解利用mongoose插件MongoDB数据库常用操作</dd>
                        </dt>
                    </div>
                </div>
            </section>

            <!-- Works -->
            <section id="wk">
                <!-- 待写轮播界面，先放张图！！！！ -->
                <h1 class="info_title" id="Works">作品展示</h1>
                <div class="swiper" id="main_work">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="http://sam9029.gitee.io/vue-shop/#/home">
                                <img src="../assets/samshop.JPG" alt="">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href=" http://sam9029.gitee.io/vue-element-stu-system">
                                <img src="../assets/samstumanaga.JPG" alt="">
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="https://sam9029.gitee.io/jd-page-imitate/"><img style='width: 100%;height: 100%;' src="../assets/JDimitate.JPG" alt=""></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="../newTravel/index.html"><img src="../assets/newtravel.JPG" alt=""></a>
                        </div>
                    </div>   
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <!-- <div id="main_work">
                    <div id="main_work_content"></div>
                </div> -->
            </section>

            <!-- Contact -->
            <section id="ct">
                <h1 class="info_title" id="Contact">Contact</h1>
                <div id="main_ct">
                    <a class="ct_link" href="https://github.com/sam9029"><img class="ct_link_img" src="img\github.svg" alt="github "><br /><span>sam9029</span></a>
                    <a class="ct_link" href="https://gitee.com/sam9029"><img class="ct_link_img" src="img\gitee2.svg" alt="gitee "><br /><span>sam9029</span></a>
                    <a class="ct_link" href="https://codepen.io/sam9029"><img class="ct_link_img" src="img\Codepen.svg" alt="Codepen "><br /><span>sam9029</span></a>
                </div>
                
            </section>
            
        </main>

        <!-- 脚部 -->
        <footer id="footer">
            <div id="ft_content">
                <h1>Sam9029</h1>
                <span><img src="img\版权135AF2.svg" alt="">2022 copyright all right reserved</span>
            </div>
        </footer>
    </div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <!-- 原生JS 实现 skill处的input滑动条读值 -->
    <script>
        // 左右轮播
        var mySwiper = new Swiper ('#main_work', {
          direction: 'horizontal', // 左右切换选项
          loop: true, // 循环模式选项
          autoplay:true,

          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        })
        


    </script>
</body>
</html>